<template>
	<view calss="">
		<view class="uni-form-item uni-column">
			<view class="search-warp clearFix">
				<view class="l-sel">
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input sel-inp">{{ array[index] }} <icon type="info" class="icon-style" size="16"/></view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="r-sear">
					<input class="uni-input sear-inp" confirm-type="search" placeholder="请输入相关内容……">
						<icon type="info" class="search-icon-style" size="16"/>
					</input>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			array: ['中国', '美国', '巴西', '日本'],
			index: 0
		};
	},
	methods: {
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携值为', e.target.value);
			this.index = e.target.value;
		}
	}
};
</script>

<style scoped>
.l-sel {
	float: left;
	width: 100px;
}
.r-sear {
	float: left;
}
.clearFix:after {
	content: '';
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}
.uni-column {
	width: 750rpx;
	display: block;
	padding: 8rpx 0;
	background-color: #1aa1ff;
}
.uni-input {
	color: #ffffff;
}
.search-warp {
	display: block;
	width: 660rpx;
	height: 60rpx;
	padding: 0 20rpx;
	line-height: 60rpx;
	margin: 0 auto;
	font-size: 16px;
	border-radius: 100rpx;
	background-color: #61bdff;
	position: relative;
}
.uni-list-cell-db {
	width: 100rpx;
	display: block;
}
.sel-inp {
	width: 160rpx;
}
.icon-style{
	float: right;
	line-height: 60rpx;
}
.search-icon-style{
	position: absolute;
	right: 10rpx;
	top:3rpx;
}
/* #ifdef MP-WEIXIN */
.icon-style{
	float: right;
	line-height: 90rpx;
}
.search-icon-style{
	position: absolute;
	right: 10rpx;
	top:14rpx;
}
/* #endif */
.sear-inp{
	width:400rpx;
	height: 60rpx;
	line-height: 60rpx;
	
}

</style>
